import Image from 'next/image'
import React, { useEffect, useRef, useState } from 'react'
import { assets } from '../assets/assets'
import { LineShadowText } from "@/components/magicui/line-shadow-text";
import { useTheme } from "next-themes";
import { PulsatingButton } from "@/components/magicui/pulsating-button";

const Navbar = () => {

    const [isScroll, setIsScroll] = useState(false)

    const sideMenuRef = useRef()

    /* 主题颜色后期换 */ 
    const theme = useTheme();
    const shadowColor = theme.resolvedTheme === "dark" ? "white" : "black";
    /* 主题颜色后期换 */

    const openMenu = ()=>{
        sideMenuRef.current.style.transform = 'translateX(-16rem)'
    }

    const closeMenu = ()=>{
        sideMenuRef.current.style.transform = 'translateX(16rem)'
    }

    useEffect(()=>{
        window.addEventListener('scroll', ()=>{
            if(scrollY > 50){
                setIsScroll(true)
            }else{
                setIsScroll(false)
            }
        })
    })

  return (
    <>
        

      <nav className={`w-full fixed px-5 lg:px-8 xl:px-[8%] py-4 flex items-center justify-between z-50 bg-gray-50 ${isScroll? "bg-opacity-50 backdrop-blur-lg shadow-sm" : ""}`}>

        <a href='#top' className='w-30 mr-14 cursor-pointer'>
            <h1 className="text-balance text-2xl font-semibold leading-none tracking-tighter sm:text-3xl md:text-4xl lg:text-5xl">
            HTFSince
            <LineShadowText className="italic" shadowColor={shadowColor}>
                2018
            </LineShadowText>
            </h1>
        </a>

        <ul className={`hidden md:flex items-center gap-6 lg:gap-8 rounded-full px-12 py-3 ${isScroll? "" : "bg-white shadow-sm bg-opacity-50" }`}>
            <li><a className='font-RDaKai' href='#top'>Home</a></li>
            <li><a className='font-RDaKai' href='#about'>About me</a></li>
            <li><a className='font-RDaKai' href='#paper'>My Paper</a></li>
            <li><a className='font-RDaKai' href='#project'>My Project</a></li>
            <li><a className='font-RDaKai' href='#experience'>Experience</a></li>
            <li><a className='font-RDaKai' href='#contact'>Contact Me</a></li>
        </ul>

        <div className='flex items-center gap-4'>
            {/* <button>
                <Image className='w-6' src={assets.moon_icon} alt=''/>
            </button> */}
            <a href='https://github.com/HTFSince2018'><Image  className='w-6' alt='' src={assets.github} /></a>
            <a href='https://gitee.com/jim-jenny'><Image  className='w-6' alt='' src={assets.gitee} /></a>

            <a className='hidden lg:flex items-center gap-3 px-10 py-2.5 border border-gray-500 rounded-full ml-4 font-RDaKai' href='#contact'>Contact<Image alt='' src={assets.arrow_icon} className='w-3'/></a>
            
            <button className='block md:hidden ml-3' onClick={openMenu}>
                <Image className='w-6' src={assets.menu_black} alt=''/>
            </button>
        </div>    

            <ul ref={sideMenuRef} className='flex md:hidden flex-col gap-4 py-20 px-10 fixed -right-64 top-0 bottom-0 z-50 h-screen bg-lightHover transition duration-500'>

                <div className='absolute right-6 top-6' onClick={closeMenu}>
                    <Image className='w-5 cursor-pointer' src={assets.close_black} alt=''/>
                </div>

                <li><a className='font-RDaKai' href='#top'>Home</a></li>
                <li><a className='font-RDaKai' href='#about'>About me</a></li>
                <li><a className='font-RDaKai' href='#paper'>My Paper</a></li>
                <li><a className='font-RDaKai' href='#project'>My Project</a></li>
                <li><a className='font-RDaKai' href='#experience'>Experience</a></li>
                <li><a className='font-RDaKai' href='#contact'>Contact Me</a></li>
            </ul>
      </nav>
    </>
  )
}

export default Navbar
